<template>
  <div class="file-upload" style="background-color: #fff;">
    <el-upload
        class="avatar-uploader"
        :headers="headers"
        action="api/file/uploadJdbFile"
        :show-file-list="true"
        :on-success="handleSuccess"
        :before-upload="beforeAvatarUpload"
      >
      <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
  </div>
</template>

<script>
import store from '@/store'
// import { compile } from 'vue/types/umd'
export default {
  data () {
    return {
      fileUrl: '',
      fileList: [],
      headers: {
        token: store.state.user.userInfo.token
      }
    }
  },
  // 自定义文件长传
  methods: {
    beforeAvatarUpload (file) {
      // 获取文件的扩展名（后缀）
      const extension = file.name.split('.').pop().toLowerCase()
      // 允许上传的文件类型数组
      const allowedExtensions = ['txt', 'xml']

      // 检查文件类型是否在允许的列表中
      if (allowedExtensions.indexOf(extension) === -1) {
        this.$message.error('只允许上传 txt和xml文件')
        return false // 阻止上传
      }

      return true // 允许上传
    },
    handleSuccess (response) {
      if (response.code === 1) {
        this.$emit('file-uploaded', response.data)
        this.$message.success('文件上传成功')
        console.log(response.data)
        this.fileUrl = response.data
      } else {
        this.$message.error('文件上传失败')
      }
    }
  }
}
</script>

<style scoped less>
.file-upload .avatar-uploader .el-upload {
    border: 2px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: white;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #e54a06;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #e54a06;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    background-color: white;
    border: 2px dashed #d9d9d9 !important;
    border-radius: 6px;
  }
</style>
